<!-- 侧边菜单组 带按钮隐藏和弹出版本 组件 -->
<template>
  <div id="side-menu-btn-group" :style="menuIsShow ? menuVisibleStyle : menuInVisibleStyle">
    <!-- 子菜单标题 -->
    <div class="menu-title-box">
      <p class="menu-title">{{ menuNameTitle }}</p>
    </div>
    <!-- 子菜单 菜单项 -->
    <div class="menu-child-box" v-for="(item, i) in menuLists" :key="i">
      <router-link :to="item.menuPath">
        <div class="menu-child-name" @click="changeColorFlog(i)" :style="{background:item.colorFlag ? '#ffffff':''}">{{ item.menuName }}</div>
      </router-link>
    </div>
    <!-- 菜单弹出按钮 -->
    <div class="menu-btn-box" :style="menuIsShow ? menuBtnIn : menuBtnOut" @click="menuIsShow = !menuIsShow">
      <img class="menu-btn-icon" :src="menuIsShow ? menuIconLeft : menuIconRight" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'side-menu-btn-group',
  components: {
  },
  props: ['menuLists', 'menuNameTitle'],
  data () {
    return {
      menuIsShow: true,
      menuVisibleStyle: {width: '180px'},
      menuInVisibleStyle: {'margin-left': '-180px'},
      menuBtnIn: {right: 0},
      menuBtnOut: {left: '180px'},
      menuIconLeft: require('../../../assets/arrow-left.png'),
      menuIconRight: require('../../../assets/arrow-right.png')
    }
  },
  computed: {
  },
  methods: {
    changeColorFlog (index) {
      this.$emit('changeColorFlog', index)
    }
  }
}
</script>

<style scoped>
  #side-menu-btn-group {
    height: 100%;
    width: 180px;
    float: left;
    position: relative;
    background-color: #e7eaee;
    transition-duration: 0.5s;
    -moz-transition-duration: 0.5s; /* Firefox 4 */
    -webkit-transition-duration: 0.5s; /* Safari 和 Chrome */
    -o-transition-duration: 0.5s; /* Opera */
    animation: fadeInLeft 1s ease-in;
  }

  .menu-title-box {
    height: 70px;
    width: 100%;
    text-align: center;
    padding: 0 10px 0 10px;
    background-color: #d8dde3;
  }

  .menu-title {
    font-size: 14px;
    color: black;
    line-height: 70px;
    white-space: nowrap;
    user-select: none;
  }

  .menu-child-box {
    height: auto;
    width: 100%;
    float: left;
  }

  .menu-child-name {
    height: 50px;
    width: 100%;
    font-size: 12px;
    font-weight: normal;
    line-height: 50px;
    text-align: center;
    color: black;
  }

  .menu-child-name:hover {
    background-color: #f1f4f8;
  }

  .menu-btn-box {
    height: 25px;
    width: 15px;
    position: absolute;
    top: 48%;
    z-index: 10;
    cursor: pointer;
    transition-duration: 0.5s;
    -moz-transition-duration: 0.5s; /* Firefox 4 */
    -webkit-transition-duration: 0.5s; /* Safari 和 Chrome */
    -o-transition-duration: 0.5s; /* Opera */
  }

  .menu-btn-box:hover {
    width: 25px;
  }

  .menu-btn-icon {
    height: 100%;
    width: 100%;
  }
</style>
